<script>
export default {
  name: 'ChatLogItem',
  methods: {},
  props: {
    icon: {
      type: String,
      default:'...'
    },
    name: {
      type: String,
      default: 'chat'
    },
    chat: {
      type: String,
      default: ''
    },
    chatDate: {
      type: String,
      default:''
    },
    newInfoCount: {
      type: Number,
      default: 0
    }
  }
}
</script>

<template>
  <div class="w-full h-[70px] py-2 hover:bg-gray-600 transition-all cursor-pointer select-none relative">
    <div class="h-full flex items-center px-1 pl-3 justify-end">
      <div class="w-full h-full mr-auto flex-1 text-right pr-3 py-2 text-[0.8em] flex flex-col justify-center">
        <div class="text-white flex">
          <span class="mr-auto text-[0.8em] font-sans">{{ chatDate }}</span>
          <span>{{name}}</span>
        </div>
        <div class="text-[0.9em] text-gray-500">{{ chat }}</div>
      </div>
      <img :src="icon" alt="" class="w-[40px] h-[40px] rounded bg-white" draggable="false"/>
      <div v-if="newInfoCount > 0" class="bg-red-400 text-white w-[18px] h-[18px] rounded-full absolute z-10 top-[8px] right-[35px] text-[0.6em] flex justify-center items-center font-sans">
        {{newInfoCount}}
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>